<!DOCTYPE html>
<!--
  ~  Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
  ~
  ~  WSO2 Inc. licenses this file to you under the Apache License,
  ~  Version 2.0 (the "License"); you may not use this file except
  ~  in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~  http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing,
  ~  software distributed under the License is distributed on an
  ~  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~  KIND, either express or implied.  See the License for the
  ~  specific language governing permissions and limitations
  ~  under the License.
  -->

<html lang="en">
<!--
This is a simple browser client sample for the given chat app example.
You can change the URL from the browser interface with the port you are using.
If you are using a secured connection change ws -> wss.
-->
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat App</title>
    <link href="bootstrap-3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="bootstrap-3/js/bootstrap.min.js"></script>
</head>
<body class="container">
    <h1>WebSocket Chat App</h1>
    <div class="row">
        <div class="col-md-6">
            <form id="connectForm">
                <div class="form-group">
                    <label for="connectUrlTxt"></label>
                    <input type="text" class="form-control" id="connectUrlTxt" value="ws://localhost:8080/chat/john">
                </div>
                <button class="btn btn-primary" type="button" id="connectBtn" name="connect" value="connect">Connect</button>
                <button class="btn btn-danger" type="button" id="connectionCloseBtn" name="connect" value="connect">Close</button>
            </form>

            <h4><span id="connectionStatus"></span></h4>
        </div>
    </div>
    <hr>
    <h3>Send</h3>
    <div class="row">
        <div class="col-md-6">
            <form id="chatForm">
                <div class="form-group">
                    <label for="sendText"></label>
                    <input type="text" class="form-control" id="sendText" placeholder="Type Something and Send">
                </div>
                <button class="btn btn-primary" type="button" id="sendBtn" name="send" >chat</button>
                <button class="btn btn-warning" type="button" id="sendTextClrBtn" name="receivedClear">Clear</button>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6" id="responseBox">
        </div>
    </div>

    <script>
        var ws = null; // WebSocketConnector
        var name = "";
        
        $('#connectBtn').click(function(){
            connectUrl = $('#connectUrlTxt').val();
            ws = new WebSocket(connectUrl);
            ws.onmessage = onMessage;
            ws.onerror = onError;
            ws.onclose = onClose;
            $('#connectionStatus').text("Successfully connected to server").css("color", "green");
            name = $('#name').val();
        });

        $('#sendText').keydown(function (e) {
            if (e.keyCode == 13) { // enter
                sendMessage();
            }
        });

        $("#chatForm").submit(function() {
            return false;
        });

        $("#connectForm").submit(function() {
            return false;
        });

        $('#sendBtn').click(function () {
            sendMessage();
        });

        $('#connectionCloseBtn').click(function () {
            ws.close();
            $('#connectionStatus').text("connection closed.").css("color", "red");
        });

        $('#sendTextClrBtn').click(function(){
            $('#responseBox').empty();
        });

        function sendMessage() {
            var text = $('#sendText').val();
            ws.send(text);
            $('#sendText').val("");
        }

        function onMessage(msg) {
            $('#responseBox').append('<h4>' + msg.data + '</h4>');
        }

        function onError(error) {
            $('#connectionStatus').text("Error connecting to the server").css("color", "red");
            console.log(error);
        }

        function onClose() {
            $('#responseBox').append('<h4 style="color: red">Server closed the connection</h4>');
            $('#connectionStatus').text("connection closed.").css("color", "red");
        }

        function sendText(text) {
            ws.send(text)
        }

    </script>
</body>
</html>
